<template>
	<div class="main">
		<div class="line-echarts">
			<div class="item">
				<div class="head">
					<div class="">
						<div class="search-item-box">
							<a-dropdown placement="bottomLeft">
								<a class="ant-dropdown-link" @click.prevent>
									{{stationEntity.stationName}}
									<a-icon type="down" />
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item v-for="site in stationEntities" @click="menuClick(site)">{{site.stationName}}</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</div>
					</div>
				</div>
				<div class="box-item-content">
					<img :src="stationEntity.coverImg" alt="电站封面图" />
				</div>
			</div>
			<div class="item">
				<div class="head">
					电站信息
				</div>
				<div class="station-info-box">
					<div class="line-item">
						<div class="item-box"><span>电站名称：</span>{{stationEntity.stationName}}</div>
						<div class="item-box"><span>所在省份：</span>{{stationEntity.provinceName}}</div>
						<div class="item-box"><span>所在城市：</span>{{stationEntity.cityName}}</div>
					</div>
					<div class="line-item">
						<div class="item-box"><span>所在区县：</span>{{stationEntity.countyName}}</div>
						<div class="item-box"><span>开放时间：</span>{{stationEntity.openHour}}</div>
						<div class="item-box"><span>电站类型：</span>{{stationEntity.carType == 1 ? '汽车充电站' : (stationEntity.carType == 2 ? '电动车充电站' : '综合充电站')}}</div>
					</div>
					<div class="line-item">
						<div class="item-box"><span>充电类型：</span>{{stationEntity.chargeType == 1 ? '直流快充' : (stationEntity.chargeType == 2 ? '交流慢充' : '综合充电站')}}</div>
						<div class="item-box"><span>联系人：</span>{{stationEntity.telPhone}}</div>
						<div class="item-box"><span>商户：</span>{{stationEntity.merchantName}}</div>
					</div>
					<div class="line-item">
						<div class="item-box"><span>经纬度：</span>{{stationEntity.longitude}}，{{stationEntity.latitude}}</div>
						<div class="item-box"><span>投运时间：</span>{{moment(stationEntity.createTime).format('YYYY-MM-DD')}}</div>
					</div>
					<div class="line-item">
						<div class=""><span style="color: #999">地址：</span>{{stationEntity.address}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="manager-tabs">
			<a-tabs v-model:activeKey="activeItem" @change="changeTabs">
				<a-tab-pane key="1" tab="充电桩">
					<div class="title-box">
						<div class="alarm-search">
							<div class="search-item-box">
								<a-select size="small" style="width: 200px; margin-right: 10px"></a-select>
								<a-date-picker v-model:value="value1" size="small"/>
							</div>
						</div>
						<div class="alarm-btn">
							<a-button type="primary" size="small" style="margin-right: 10px" @click="addPile">添加</a-button>
						</div>
					</div>
					<div class="site-table">
						<PileTable :pileEntities="pileEntities" :total="page.total" @changePage="changePilePage" @edit="editPile" @status="setPileStatus"></PileTable>
					</div>
				</a-tab-pane>
				<a-tab-pane key="2" tab="充电枪" force-render>
					<div class="title-box">
						<div class="alarm-search">
							<div class="search-item-box">
								<a-select size="small" style="width: 200px; margin-right: 10px"></a-select>
								<a-date-picker v-model:value="value1" size="small" locale="ch"/>
							</div>
						</div>
						<div class="alarm-btn">
							<a-button type="primary" size="small" style="margin-right: 10px" @click="addSpear">添加</a-button>
						</div>
					</div>
					<div class="site-table">
						<SpearList :spearEntities="spearEntities" :total="page.total" @changePage="changeSpearPage" @edit="editSpear" @status="setSpearStatus"></SpearList>
					</div>
				</a-tab-pane>
			</a-tabs>
		</div>
		<AddPile ref="pile" :title="title" :id="id" @reloadList="queryPileList"></AddPile>
		<AddSpear ref="spear" :title="title" :id="id" @reloadList="querySpearList"></AddSpear>
		<!--修改充电桩状态-->
		<a-modal v-model:visible="statusPileVisible" title="设置电站" @ok="savePileStatus">
			<a-radio-group v-model:value="status">
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="1">正常使用</a-radio>
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="2">暂停服务</a-radio>
			</a-radio-group>
			<div class="radio-box">
				<div class="radio-box-item">电站在运营过程中会根据实际情况适时调整：</div>
				<div class="radio-box-item">1、暂停服务则是表示该桩体未开启或者需要维护保养状态，无法提供充电服务</div>
				<div class="radio-box-item">2、正常使用则是表示该桩体良好，可以正常运营和提供充电服务</div>
			</div>
		</a-modal>
		<!--修改充电枪状态-->
		<a-modal v-model:visible="statusSpearVisible" title="设置电站" @ok="saveSpearStatus">
			<a-radio-group v-model:value="status">
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="1">空闲</a-radio>
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="2">使用</a-radio>
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="3">离线</a-radio>
			</a-radio-group>
			<div class="radio-box">
				<div class="radio-box-item">电站在运营过程中会根据实际情况适时调整：</div>
				<div class="radio-box-item">1、维护则是表示电站未开启或者需要维护保养状态，无法提供充电服务</div>
				<div class="radio-box-item">2、开启则是表示电站良好，可以正常运营和提供充电服务</div>
			</div>
		</a-modal>
	</div>
</template>

<script>
import {api, post} from "@/api/api";
import moment from "moment";
import PileTable from "@/components/PileTable";
import SpearList from "@/components/SpearTable";
import AddPile from "@/view/pile/components/AddPile";
import AddSpear from "@/view/spear/components/AddSpear";

export default {
	name: "StationManager",
	components: {AddSpear, SpearList, PileTable, AddPile},
	data() {
		return {
			value1: '',
			activeItem: '1',
			loading: false,
			page: {
				current: 1,
				pageSize: 10,
				total: 0,
			},
			moment,
			stationEntity: {},
			stationEntities: [],
			pileEntities: [],
			spearEntities: [],
			id: '', // 编辑时的电站Id
			status: 1,
			title: '',
			statusSpearVisible: false,
			statusPileVisible: false,
		}
	},
	created() {
		post(api.GetStationList, {}).then(res=>{
			this.stationEntities = res.data.data
			this.stationEntity = res.data.data[0]
			this.querySingle(res.data.data[0].id)
		})
	},
	methods: {
		changeTabs( active ) {
			if ( active == 1 ) {
				this.queryPileList()
			} else if ( active == 2 ) {
				this.querySpearList()
			}
		},
		// 点击页面顶部下列菜单加载电站
	 	menuClick( site ) {
			this.querySingle ( site.id )
		},
		// 查询单个电站详情
		querySingle( id ) {
			post ( api.StationSingle, {id: id} ).then ( res => {
				this.stationEntity = res.data.data
				// 每次查询单个电站后再查询对应的充电桩以及充电枪
				this.queryPileList()
				this.querySpearList()
			} )
		},
		// 查询充电桩列表
		queryPileList(){
			post(api.PileEntities, {stationId: this.stationEntity.id, page: this.page.current, limit: this.page.pageSize}).then(res=>{
				this.pileEntities = res.data.data
				this.page.total = res.data.count
			})
		},
		// 查询充电枪列表
		querySpearList(){
			post(api.SpearEntities, {stationId: this.stationEntity.id, page: this.page.current, limit: this.page.pageSize}).then(res=>{
				this.spearEntities = res.data.data
				this.page.total = res.data.count
			})
		},
		addPile(){
			this.title = '添加充电桩'
			this.$refs.pile.show()
		},
		// 编辑电站
		editPile(id) {
			this.title = '编辑充电桩'
			this.$refs.pile.show(id)
		},
		addSpear(){
			this.title = '添加充电枪'
			this.$refs.spear.show()
		},
		// 编辑充电枪
		editSpear(id) {
			this.title = '编辑充电枪'
			this.$refs.spear.show(id)
		},
		// 修改充电桩状态
		setPileStatus(spear){
			this.statusPileVisible = true
			this.status = spear.status
			this.id = spear.id
		},
		// 保存充电桩状态
		savePileStatus(){
			let that = this
			that.$confirm({
				title: '提示',
				content: '确定此操作吗？',
				okText: '确认',
				cancelText: '取消',
				type: 'warning',
				showCancel: false,
				onOk() {
					post ( api.UpdatePile, {id: that.id, status: that.status} ).then ( res => {
						that.statusPileVisible = false
						that.queryPileList()
					} )
				},
				onCancel() {
				}
			})
		},
		// 修改充电枪状态
		setSpearStatus(spear){
			this.statusSpearVisible = true
			this.status = spear.status
			this.id = spear.id
		},
		// 保存充电枪状态
		saveSpearStatus(){
			let that = this
			that.$confirm({
				title: '提示',
				content: '确定此操作吗？',
				okText: '确认',
				cancelText: '取消',
				type: 'warning',
				showCancel: false,
				onOk() {
					post ( api.UpdateSpear, {id: that.id, status: that.status} ).then ( res => {
						that.statusSpearVisible = false
						that.querySpearList()
					} )
				},
				onCancel() {
				}
			})
		},
		//由子组件通过$emit调用触发
		changePilePage(pageInfo) {
			this.page.current = pageInfo.page
			this.page.pageSize = pageInfo.pageSize
			this.queryPileList()
		},
		//充电枪子组件切换页码触发
		changeSpearPage(pageInfo){
			this.page.current = pageInfo.page
			this.page.pageSize = pageInfo.pageSize
			this.querySpearList()
		}
	}
}
</script>

<style lang="less">
@import "../../static/commons";
@import "../../static/stationManager";
</style>
